<template>
    <div class="hotel_filter">
        <!-- 酒店价格 -->
        <div class="hotel_filter_option  flex6">
            <div class="hotel_filter_option_title">
                <span>价格</span>
                <span>0-4000</span>
            </div>
            <div class="hotel_filter_option_content hotel_price">
                <el-slider
                    :max="4000"
                    class="filter_slider"
                    v-model="price"
                    @change="filterPrice=$event"
                ></el-slider>
            </div>
        </div>

        <!-- 下拉筛选组件 -->
        <div
            class="hotel_filter_option hotel_level flex5"
            v-for="(v,i) of dropDownOptions"
            :key="v.id || i"
        >
            <div class="hotel_filter_option_title">{{v.title}}</div>
            <div class="hotel_filter_option_content">
                <el-dropdown
                    class="filter_dropdown"
                    placement="bottom-start"
                    @command="handleCommand"
                >
                    <span class="el-dropdown-link">
                        {{dropDownTips[i]}} <i class="el-icon-arrow-down el-icon--right"></i>
                    </span>
                    <el-dropdown-menu slot="dropdown">
                        <div class="filter_menu_box">
                            <el-dropdown-item
                                class="filter_dropdown_item"
                                v-for="(item,index) of v.list"
                                :key="item.id || index"
                                :command="item"
                            >
                                <i :class="['iconfont', item.selected?'iconright-1':'iconcircle']"></i>
                                {{item.name}}
                            </el-dropdown-item>
                        </div>
                    </el-dropdown-menu>
                </el-dropdown>
            </div>
        </div>

        <!-- 撤销按钮 -->
        <div class="hotel_filter_cancel flex4">
            <el-button
                type="primary"
                size="mini"
                @click="cancelFilter"
            >撤销条件</el-button>
        </div>
    </div>
</template>

<script>

export default {
    components: {},
    props: {},
    data() {
        return {
            price: 4000,//滑块绑定值
            filterPrice: 4000,//价格筛选值

            //下拉配置项
            dropDownOptions: ['酒店等级', '酒店类型', '酒店设施', '酒店品牌'].map(v => ({ title: v, list: [] }))
        };
    },
    computed: {
        //下拉框文字提示
        dropDownTips() {
            return this.dropDownOptions.map(v => {
                const selectedList = v.list.filter(item => item.selected); //选中项列表
                const selectedLen = selectedList.length; //选中的数量
                let tip = '不限'; //默认为不限
                if (selectedLen) { //存在选中项
                    tip = selectedLen == 1 ? selectedList[0].name : `已选择${selectedLen}项`;
                }
                return tip;
            });
        },

        // 筛选集
        filterOptions() {
            return [this.filterPrice, ...this.dropDownOptions.map(v => v.list.filter(item => item.selected).map(item => item.id))];
        }
    },
    methods: {
        //点击菜单项
        handleCommand(menu) {
            menu.selected = !menu.selected;
        },

        //撤销筛选
        cancelFilter() {
            this.price = this.filterPrice = 4000;//价格重置
            //筛选条件重置
            this.dropDownOptions = this.dropDownOptions.map(v => {
                v.list.map(item => item.selected = false);//每一项列表项的selected恢复为false
                return v;
            });
        }
    },

    watch: {
        //监听筛选集
        filterOptions() {
            //从筛选集中取出所需参数
            const [price_lt, hotellevel_in, hoteltype_in, hotelasset_in, hotelbrand_in] = this.filterOptions;

            this.$emit('updateQueryString', { //发射事件，更新查询字符串
                price_lt,
                hotellevel_in,
                hoteltype_in,
                hotelasset_in,
                hotelbrand_in
            });
        }
    },

    async created() {
        const res = await this.$axios.get('/hotels/options');
        // console.log(res);
        const { assets, brands, levels, types } = res.data.data;//获取配置项集合

        const { price_lt, hotellevel_in, hoteltype_in, hotelasset_in, hotelbrand_in } = this.$route.query;
        //从查询字符串中拿取选中项列表
        const selectedList = [hotellevel_in, hoteltype_in, hotelasset_in, hotelbrand_in].map(v => Array.isArray(v) ? v : [v]);
        //映射出配置项列表
        this.dropDownOptions = [levels, types, assets, brands].map((v, i) => {
            const { title } = this.dropDownOptions[i]; //标题
            const list = v.map(item => ({ ...item, selected: selectedList[i].includes('' + item.id) }));//配置列表,选中列表中存在id,则selected为true，否则为false;
            return { title, list };
        });

        //存在价格参数，则进行初始化价格筛选
        if (price_lt) {
            this.filterPrice = this.price = +price_lt;
        }

    }
}
</script>

<style lang="less" scoped>
.hotel_filter {
    display: flex;
    padding: 10px 0;
    width: 100%;
    height: 80px;
    border: 1px solid #ccc;
    box-sizing: border-box;
    margin-top: 20px;

    .hotel_filter_option {
        border-right: 1px solid #ccc;
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        padding: 0 20px;

        .hotel_filter_option_title {
            display: flex;
            align-items: center;
            justify-content: space-between;
            font-size: 14px;
        }

        .hotel_filter_option_content {
            height: 38px;
            display: flex;
            align-items: center;

            .filter_slider {
                width: 100%;
            }

            .filter_dropdown {
                width: 100%;
            }

            .el-dropdown-link {
                width: 100%;
                display: flex;
                justify-content: space-between;

                i {
                    display: flex;
                    align-items: center;
                }
            }
        }
    }
    .flex6 {
        flex: 6;
    }
    .flex5 {
        flex: 5;
    }
    .flex4 {
        flex: 4;
    }

    .hotel_filter_cancel {
        display: flex;
        justify-content: center;
        align-items: center;
    }
}

/deep/ .filter_menu_box {
    max-height: 250px;
    overflow: auto;

    .filter_dropdown_item {
        min-width: 130px;
        height: 36px;
        padding: 0 20px;
        display: flex;
        align-items: center;

        i.iconfont {
            margin-right: 10px;
        }
    }
}
</style>